<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>麦当劳套餐</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            img{
                width: 100%;
                height: 424px;
            }
            main{
                width:600px;
                height: 200px;
                padding:20px;
                border:5px solid skyblue;
                margin:20px auto 0px;
            }
            ul li{
                width: 200px;
                line-height: 40px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            a{
                font-size: 14px;
                text-decoration: none;
                color:#aa00ff;
            }
            .dd{
                background:pink;
                color:red;
            }
            div{
                display: none;
            }
            .aa{
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="images/大图.jpg" alt="">
        <main >
            <ul>
                <li class="dd">无肉不欢</li>
                <li >无辣不欢</li>
                <li>想吃鲜的</li>
            </ul>
            <section>
                <div class="aa">
					<a href="images/无肉不欢.png" target="_blank">吉士汉堡，麦辣鸡翅，可乐</a><br><br>                   
                </div>
                <div>
                    <a href="images/无辣不欢 .png" target="_blank">麦辣鸡翅，麦辣鸡腿，可乐</a>
				</div>
                <div>
                    <a href="images/想吃鲜的.png" target="_blank">沙拉，玉米，鳕鱼汉堡，可乐</a><br><br>
                </div>   
            </section>
 

            <script>
                var tags=document.getElementsByTagName('li');
                var boxs=document.getElementsByTagName('div');
                for(var i=0;i<tags.length;i++){
                    tags[i].index=i;
 

                    tags[i].onclick=function(){


                        for(var m=0;m<tags.length;m++){
                            tags[m].className='';
                            boxs[m].className='';
                        }

                        this.className='dd';
 
                        var n=this.index;
                        
                        boxs[n].className='aa'
                    }
                }
            </script>
        </main>
    </body>
</html>